<template>
  <view class="homework-wrap">
    <back></back>
    <search></search>
    <mescroll-uni :top="220" :bottom="0" :down="downOption" @down="pullRefresh" :up="upOption" @up="pullUp">
      <view v-if="dataList.length" class="project-list">
				<view class="project-item" v-for="item of dataList" :key="item.taskId" @click.stop="handleDetail(item)">
					<view class="project-time">{{item.taskCreateTime}}</view>
					<view class="project-info-container">
						<view class="item-title">
              <view class="left-title">{{item.dictName}}作业</view>
              <image v-if="item.ifParentAutograph === 2" :animation="animationData" class="parent-check" src="/static/images/common/parent.png"></image>
            </view>
            <view class="desc">{{item.taskContentFix}}</view>
						<view class="preview-image-box" v-if="item.taskPhoto">
							<previewImg :list="item.taskPhoto" class="preview-image"></previewImg>
						</view>
            <view class="detail">点击可查看详情</view>
            <view class="icon">{{item.dictName.substr(0,1)}}</view>
					</view>
				</view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import MescrollUni from "../../components/mescroll-uni/mescroll-uni.vue";
import previewImg from '../../components/preview/index'
import {parseTime} from '../../utils'
import { homeworkList } from '../../api/homework'
export default {
	name: 'homework',
	components: {
    MescrollUni,  
    previewImg
	},
  data() {
    return {
      downOption: {
        use: true, // 是否启用下拉刷新; 默认true
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
      },
      upOption: {
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        empty: {
          tip: '暂无相关数据',
					icon: '/static/images/common/404.png'
        }
      },
      animationData: {},
      dataList: []
    }
  },
  onShow() {
    this.initAnimation()
    
  },
  methods: {
    initAnimation() {
      const animation = uni.createAnimation({
        transformOrigin: "50% 50%",
        duration: 500,
        timingFunction: "ease",
        delay: 0
      })
      animation.translateX(0).opacity(1).step()
      this.animationData = animation.export()
    },
    // 上拉
    async pullUp(mescroll) {
      let currentPage = mescroll.num; // 页码, 默认从1开始
      let showCount = mescroll.size; // 页长, 默认每页10条
      const res = await homeworkList({currentPage,showCount})
			let curPageData = res.list
      let totalSize = res.total;
			const newCurPageData = curPageData.map((item) => {
				const time = parseTime(item.taskCreateTime/1000)
        item.taskCreateTime = `${time.substring(5,7)}月 ${time.substring(8,10)}日${time.substring(10,15)}`
        item.taskContentFix = `${item.taskContent.substring(0,36)}...`
				return item
			})
			mescroll.endBySize(curPageData.length, totalSize);
      if(mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
      this.dataList = this.dataList.concat(newCurPageData)
    },
    // 刷新
    pullRefresh(mescroll) {
      mescroll.resetUpScroll();
    },
    // 详情
    handleDetail(item) {
      const params = {
        taskTiming: item.taskTiming,
        taskEndTime: item.taskEndTime,
        taskId: item.taskId,
        dictName: item.dictName,
        taskContent: item.taskContent,
        ifParentAutograph: item.ifParentAutograph,
        taskPhoto: item.taskPhoto
      }
      const nParams = JSON.stringify(params)
      uni.navigateTo({
        url: `/pages/homework/detail/index?params=${nParams}`,
				animationType: 'pop-in'
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.homework-wrap{
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
}
.project-list{
	padding: 0 20upx;
	box-sizing: border-box;
	width: 100%;
}
.project-item{
  padding-top:64upx;
  width: 100%;
  box-sizing: border-box;
  .project-time{
    width:247upx;
    height:41upx;
    background:rgba(204,204,204,1);
    border-radius:20upx;
    text-align: center;
    line-height: 41upx;
    color: #fff;
    font-size:23upx;
    margin: 0 auto 64upx;
    letter-spacing: 2upx;
  } 
  .project-info-container{
    position: relative;
    width:100%;
    background:rgba(240,240,240,1);
    border-radius:42upx;
    padding: 17upx 43upx 10upx 114upx;
    box-sizing: border-box;
    .item-title{
      display: flex;
      justify-content: space-between;
      .left-title {
        line-height: 64upx;
        font-weight: bold;
        font-size: 30upx;
      }
      image{
        width: 138upx;
        height: 47upx;
        transform: translateX(300upx);
        /* transition: all .3s; */
        opacity: 0;
      }
    }
    .desc{
      font-size:29upx;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:38upx;
      margin-bottom: 15upx;
      letter-spacing: 1upx;
    }
		.preview-image-box {
			width: 100%;
			position: relative;
			height: 156upx;
			.preview-image{
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
    .detail {
      font-size:25upx;
      font-weight:500;
      color:rgba(153,153,153,1);
      line-height:65upx;
    }
    .icon{
      position: absolute;
      width:94upx;
      height:94upx;
      border-radius: 50%;
      top: -54upx;
      left:0;
			font-size:58upx;
      font-weight: bold;
			text-align: center;
      line-height: 94upx;
			color: #fff;
    }
  }
  // &:nth-of-type(1) {
  //   .item-title{
  //     color: #F2796E;
  //   }
  //   .icon {
  //     background-color: #F2796E;
  //   }
  // }
  // &:nth-of-type(2) {
  //   .item-title{
  //     color: #35B8EE;
  //   }
  //   .icon {
  //     background-color: #35B8EE;
  //   }
  // }
  // &:nth-of-type(3) {
  //   .item-title{
  //     color: #FFC82B;
  //   }
  //   .icon {
  //     background-color: #FFC82B;
  //   }
  // }
  &:nth-of-type(3n+1) {
    .item-title{
      color: #F2796E;
    }
    .icon {
      background-color: #F2796E;
    }
  }
  &:nth-of-type(3n+2) {
    .item-title{
      color: #35B8EE;
    }
    .icon {
      background-color: #35B8EE;
    }
  }
  &:nth-of-type(3n+3) {
    .item-title{
      color: #FFC82B;
    }
    .icon {
      background-color: #FFC82B;
    }
  }
}
</style>